<template>
  <div>
    <el-form
      class="userfrom"
      ref="form"
      :model="form"
      label-position="left"
      label-width="70px"
      inline="true"
    >
      <el-form-item
        class="userfrombox"
        v-for="item in formLabel"
        :key="item.label"
        :label="item.label"
      >
        <!-- <span v-if="item.type === 'picture'" class="inputimgbox">
          <img class="userimg" :src="form[item.model]" alt="" /> -->
          <!-- <Uploadimg :widthstyle="50" :imgurllist="form[item.model]"/> -->
        <!-- </span> -->

        <span v-if="item.type === 'id'" class="inputbox">
          <el-input disabled v-model="form[item.model]"></el-input>
        </span>

        <span v-if="item.type === 'input'" class="inputbox">
          <el-input
            :placeholder="'请输入' + item.label"
            v-model="form[item.model]"
          ></el-input>
        </span>

        <span v-if="item.type === 'num'"  class="inputbox">
          <el-input-number v-model="form[item.model]"></el-input-number>
        </span>

        <span v-if="item.type === 'switch'" class="inputbox">
          <el-switch v-model="form[item.model]"></el-switch>
        </span>

        <span v-if="item.type === 'date'" class="inputbox">
          <el-date-picker
            type="date"
            placeholder="选择日期"
            value-format="YYYY-MM-DD"
            v-model="form[item.model]"
          ></el-date-picker>
        </span>
        <span v-if="item.type === 'select'" class="inputbox">
          <el-select placeholder="请选择" v-model="form[item.model]">
            <el-option
              v-for="item in item.opts"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </span>
      </el-form-item>
      <el-form-item>
        <slot></slot>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">
const props = defineProps({
  formLabel: Array,
  form: Object,
  inline: Boolean,
  operateType: String,
});
onMounted(() => {
  console.log(props);
});
</script>

<style lang="scss" scoped>
.userfrom {
  height: 100%;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-between;
  // background-color: rgb(255, 239, 211);
  .userfrombox {
    // height: 100%;
    // width: 100%;
    // float: left;
    // display: flex;
    // flex-direction: row;
    // // flex-wrap: wrap;
    // background-color: aqua;
    // justify-content: space-between;
    .userimg {
      width: 100px;
      height: 100px;
    }
    //   .elfrom {
    .inputbox {
      // margin-left: 5%;
      width: 240px;
      height: 60px;
      // background-color: rgb(33, 30, 26);
    }
    .inputimgbox {
      // margin-left: 5%;
      width: 240px;
      height: 100px;
      // margin-left: 30px;
      // background-color: rgb(35, 26, 13);
    }
  }
  // justify-content: space-between;
}
</style>
